<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="/static/ft/js/vue.min.js"></script>
    <script src="/static/ft/js/vue-resource.min.js"></script>
</head>
<body>
<div id="content">
    [[msg]]
    <hr>
    <a v-bind:href="url">试一试</a>
    <hr>
    <ul>
        <li v-if="flag">1</li>
        <li v-if="false">2</li>
        <li>3</li>
    </ul>
    <ul>
        <li v-for="item in nums">[[item]]</li>
    </ul>
    <ul>
        <li v-for="(item,index) in nums">[[index]]:[[item]]</li>
    </ul>
    <p>
        <input type="button" v-on:click="hello" value="试一试1">
    </p>
    <p>
        <input type="button" v-on:click="send_request1" value="试一试2-1">
        <input type="button" v-on:click="send_request2" value="试一试2-2">
    </p>
</div>

<script>
    //创建vue对象
    new Vue({
        "el": "#content",//此id标签内容可以支持vue
        "delimiters": ["[[", "]]"],//设置变量定界符
        "data": {//数据
            "msg": "hello,vue!!!",
            "url":"https://www.baidu.com",
            "flag":true,
            "nums":[120,110,119]
        },
        "methods":{//函数
            "hello":function(){
                alert("hello,vue!!!")
            },
            "send_request1":function(){
                this.$http.get("/ft/api/goods/").then(function (data) {//发送请求
                    console.log(data)
                    alert("yes")
                },function () {
                    alert("no")
                })
            },
            "send_request2":function(){
                this.$http.post("/ft/api/goods/",{"params":{"goodstype_id":2}}).then(function (data) {//发送请求
                    console.log(data)
                    alert("yes")
                },function () {
                    alert("no")
                })
            },
        }
    })
</script>
</body>
</html>